<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
    <div id="displayItems">
        <table border="1">
            <tr>
                <th>用例ID</th>
                <th>用例标题</th>
                <th>执行结果</th>
                <th>操作</th>
            </tr>
            <tr v-for="item in cases">
                <td>{{ item.case_id }}</td>
                <td>{{ item.title }}</td>
                <td>{{ item.result }}</td>
                <td>
                    <button type="button" @click="deleteItem(item.case_id)">删除</button>
                </td>
            </tr>

        </table>
    </div>
    <div id="addItems">
        <div>用例id: <input type="text" v-model="newItemData.case_id"></div>
        <div>用例标题: <input type="text" v-model="newItemData.title"></div>
        <div>用例结果: <input type="text" v-model="newItemData.result"></div>
        <button type="button" @click="addItem(newItemData)">增加</button>
    </div>
</div>

</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                newItemData:{
                    case_id:'',
                    title:'',
                    result:''
                    },
                cases: [
                    {
                        case_id: 1,
                        title: "你好，我是xxx",
                        result: "success"
                    },
                    {
                        case_id: 2,
                        title: "你好，我是yyy",
                        result: "success"
                    },
                    {
                        case_id: 3,
                        title: "你好，我是zzz",
                        result: "success"
                    },
                    {
                        case_id: 4,
                        title: "你好，我是AAA",
                        result: "fail"
                    },
                    {
                        case_id: 5,
                        title: "你好，我是BBB",
                        result: "fail"
                    }
                ]
            }
        },
        methods: {
            deleteItem(id) {
                this.cases = this.cases.filter(x => x.case_id !== id);
            },

            addItem(newItem){
                this.cases.push(newItem);
            }
        }
    }).mount("#app")
</script>
</html>